<template>
	<view class="mallcenter">
		<u-status-bar></u-status-bar>
		<u-navbar title="小店">
			<view class="nav-slot" slot="left">
				<u-icon name="arrow-left" size="45" @click="goBack"></u-icon>
				<u-line direction="column" :hairline="false" length="40" margin="0 8px"></u-line>
				<u-icon name="home" size="50" @click="gotoHome"></u-icon>
			</view>
		</u-navbar>
		<view class="wrap">
			<view class="searchBox">
				<cusSearch style="flex: 1;" placeholder="搜索商品" @search="goToSearch"></cusSearch>
			</view>
			<view style="background-color: #f7f8fa;width: 750rpx;">
				<u-tabs lineColor="#0170ef" lineWidth="64rpx" lineHeight="8rpx" activeStyle="color:#0170ef" ref="tabs"
					inactiveStyle="#4E5969" :list="tabsList" :current="current" @click="tabsClick"
					:scrollable="false"></u-tabs>
			</view>
			<swiper class="swiper-box" :current="swiperCurrent" @animationfinish="animationfinish">
				<swiper-item class="swiper-item" v-show="swiperCurrent==0">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom(0)">
						<view class="page-box" v-if="dataList.length>0">
							<view class="item" @click.stop="goToDetail(item)" v-for="(item,index) in dataList"
								:key="index">
								<image class="imgs" :src="item.pic">
								</image>
								<view class="title u-line-2">
									{{item.prodName||""}}
								</view>
								<view class="price">
									<text v-if="item.price||item.price===0">￥ {{item.price||""}}</text>
									<text class="goods-tag" v-if="item.voucher==1">可用代金券</text>
								</view>
								<view class="time flex_start_center">
									<view class="owner-avat">
										<image :src="item.shopHead" v-if="item.shopHead" mode=""></image>
										<image v-else
											src="https://file.casugn.com/storecompcard/temp/男_1705454811406.png"
											mode=""></image>
									</view>
									<view class="share u-line-1">
										{{item.shopUser?item.shopUser:''}}
									</view>

								</view>
							</view>
						</view>
						<u-empty marginTop="150" mode="list" textSize="30" iconSize="150" v-else>
						</u-empty>
					</scroll-view>
				</swiper-item>
				<swiper-item class="swiper-item" v-show="swiperCurrent==1">
					<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom(1)">
						<view class="page-box" v-if="dataList2.length>0">
							<view class="item" @click.stop="goToGiftsDetail(item)" v-for="(item,index) in dataList2"
								:key="index">
								<image class="imgs" :src="item.image">
								</image>
								<view class="title u-line-2">
									{{item.name||""}}
								</view>
								<view class="price">
									<text>{{item.price?`￥ ${item.price}`:''}}</text>
								</view>
								<view class="time flex_start_center">
									<view class="owner-avat">
										<image :src="item.shopHead" v-if="item.shopHead" mode=""></image>
										<image v-else
											src="https://file.casugn.com/storecompcard/temp/男_1705454811406.png"
											mode=""></image>
									</view>
									<view class="share u-line-1">
										{{item.shopUser?item.shopUser:''}}
									</view>

								</view>
							</view>
						</view>
						<u-empty marginTop="150" mode="list" textSize="30" iconSize="150" v-else>
						</u-empty>
					</scroll-view>
				</swiper-item>


			</swiper>
		</view>
<!--		<shoptabbar :tabbarIndex="0"></shoptabbar>-->
	</view>
</template>

<script>
	// import shoptabbar from '@/pages/pagesMall/components/shoptabbar/shoptabbar.vue'
	import cusSearch from '@/components/cus-search/cus-search.vue'
	export default {
		components: {
			cusSearch,
			// shoptabbar
		},
		data() {
			return {
				current: 0,
				tabsList: [{
						name: '商品'
					},
					{
						name: '大礼包'
					}
				],
				swiperCurrent: 0,
				tabsHeight: 0,
				queryParams1: {
					pageNo: 1,
					pageSize: 10,
					total: 0,
				},
				queryParams2: {
					pageNo: 1,
					pageSize: 10,
					total: 0,
				},
				dataList: [],

				dataList2: []
			};
		},
		onShow() {
			switch (this.current) {
				case 0:
					this.getGoodsList(1)
					break;
				case 1:
					this.getGiftsList(1)
					break;
			}
		},
		methods: {
			goToSearch(e) {
				console.log(e);
				switch (this.current) {
					case 0:
						this.getGoodsList(1, e)
						break;
					case 1:
						this.getGiftsList(1, e)
						break;
				}
			},
			async getGoodsList(arg, prodName = '') {
				uni.showLoading({})
				if (arg == 1) {
					this.queryParams1.pageNo = 1
					this.dataList = []
					this.queryParams1.total = 0
				}

				let res = await this.$api.getGoodsList({
					pageNo: this.queryParams1.pageNo,
					pageSize: this.queryParams1.pageSize,
					status: 1,
					prodName
				})
				if (res.success) {
					console.log(res.result.records);
					this.dataList = [...this.dataList, ...res.result.records]
					this.queryParams1.total = res.result.total
				} else {
					this.dataList = []
					this.queryParams1.total = 0
				}
				uni.hideLoading()
			},
			async getGiftsList(arg, name = "") {
				uni.showLoading({})
				if (arg == 1) {
					this.queryParams2.pageNo = 1
					this.dataList2 = []
					this.queryParams2.total = 0
				}

				let res = await this.$api.queryGiftPage({
					pageNo: this.queryParams2.pageNo,
					pageSize: this.queryParams2.pageSize,
					status: 0,
					give: 0,
					name
				})
				if (res.success) {
					console.log(res.result.records);
					this.dataList2 = [...this.dataList2, ...res.result.records]
					this.queryParams2.total = res.result.total
				} else {
					this.dataList2 = []
					this.queryParams2.total = 0
				}
				uni.hideLoading()
			},
			tabsClick({
				index
			}) {
				this.current = index
				this.swiperCurrent = index
			},
			animationfinish({
				detail: {
					current
				}
			}) {
				this.swiperCurrent = current;
				this.current = current;
				console.log(current)
				switch (current) {
					case 0:
						if (this.dataList.length == 0) {
							this.getGoodsList(1)
						}

						break;
					case 1:
						if (this.dataList2.length == 0) {
							this.getGoodsList(1)
						}
						this.getGiftsList(1)
						break;
				}
			},
			goToDetail(item) {
				uni.navigateTo({
					url: `/pagesMall/mallCenter/mallCenterDetail?id=${item.id}&openId=${item.openId}`
				})
			},
			goToGiftsDetail(item) {
				uni.navigateTo({
					url: `/pagesMall/mallCenter/mallCenterGiftsDetail?id=${item.id}&openId=${item.openId}`
				})
			},
			reachBottom(current) {
				switch (current) {
					case 0:
						if (this.queryParams1.pageNo * this.queryParams1.pageSize > this.queryParams1.total) {
							uni.showToast({
								title: '没有更多数据',
								icon: 'none'
							})
						} else {
							this.queryParams1.pageNo++
							this.getGoodsList()
						}
						break;
					case 1:
						if (this.queryParams2.pageNo * this.queryParams2.pageSize > this.queryParams2.total) {
							uni.showToast({
								title: '没有更多数据',
								icon: 'none'
							})
						} else {
							this.queryParams2.pageNo++
							this.getGiftsList()
						}
						break;
				}
			},
			goBack() {
				const pageNum = getCurrentPages()
				if (pageNum > 2) {
					uni.navigateBack()
				} else {
					uni.switchTab({
						url: '/pages/user/user'
					})
				}

			},
			gotoHome() {
				uni.switchTab({
					url: '/pages/card/card'
				})
			}
		}
	};
</script>


<style lang="scss" scoped>
	.mallcenter {
		height: 100vh;
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.nav-slot {
		display: flex;
		height: 88rpx;
		align-items: center;
		width: 200rpx;
	}

	.wrap {
		flex: 1;
		margin-top: 88rpx;
		background-color: #f7f8fa;
		display: flex;
		flex-direction: column;
		// height: calc(100vh - 188rpx);
		width: 100%;

		.searchBox {

			width: 100%;
			background-color: #fff;
			height: 112rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.swiper-box {
			flex: 1;
			padding-bottom: 20rpx;

			.swiper-item {
				height: 100%;
			}

			.page-box {
				margin: 0 32rpx;
				height: 100%;
				border-radius: 16rpx;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;

				.item {
					border-radius: 8rpx;
					padding-bottom: 10rpx;
					margin-bottom: 24rpx;
					width: 333rpx;
					background: #FFFFFF;
					height: 540rpx;
					overflow: hidden;

					.imgs {
						width: 333rpx;
						height: 333rpx;
					}

					.title {
						margin: 0 20rpx;
						height: 72rpx;
						font-size: 28rpx;
						font-weight: 400;
						color: #1D2129;
						line-height: 36rpx;

					}

					.price {
						margin-top: 10rpx;
						font-size: 28rpx;
						color: #FF3131;

						.goods-tag {
							border-radius: 6rpx;
							border: 1rpx solid #FF7D00;
							padding: 4rpx 10rpx;
							margin-left: 20rpx;
							text-align: center;
							width: 100rpx;
							height: 28rpx;
							font-size: 20rpx;
							font-weight: 400;
							color: #FF7D00;
							line-height: 28rpx;

						}
					}

					.time {
						margin: 0 10rpx;
						margin-top: 10rpx;

						.owner-avat {
							width: 40rpx;
							height: 40rpx;
							margin-right: 10rpx;
							border-radius: 50%;

							image {
								width: 100%;
								height: 100%;
								border-radius: 50%;
							}
						}

						.share {
							width: 132rpx;
							height: 40rpx;
							font-size: 28rpx;
							font-weight: 400;
							color: #4E5969;
							line-height: 39rpx;
						}

						.buy {
							text-align: center;
							width: 152rpx;
							height: 48rpx;
							background: #276AEE;
							border-radius: 4rpx 4rpx 4rpx 4rpx;
							font-size: 24rpx;
							font-weight: 400;
							color: #FFFFFF;
							line-height: 48rpx;
						}
					}
				}
			}


		}
	}
</style>
